import React, { Component } from 'react';
import { Card, Tabs } from 'antd';

// 引入当前页面的css
import '@/assets/css/login.css';
// 引入密码登录和短信登录对应的组件
import Normallogin from './NormalLogin';
import Mobilelogin from './MobileLogin';
const { TabPane } = Tabs;
//  登录页
class Login extends Component {
    render() {
        return (
            <div className='loginBox'>
                {/* 白版卡片 */}
                <div className="site-card-border-less-wrapper">
                    <Card
                        bordered={false}
                        style={{
                            width: 300,
                        }}
                    >
                        <Tabs defaultActiveKey="1" tabBarGutter={100} centered onChange={this.onChange}>
                            <TabPane tab="密码登录" key="1">
                                {/* 密码登录的组件 */}
                                <Normallogin></Normallogin>
                            </TabPane>
                            <TabPane tab="短信登录" key="2">
                                {/* 短信登录组件 */}
                                <Mobilelogin></Mobilelogin>
                            </TabPane>
                        </Tabs>
                    </Card>
                </div>
            </div>
        );
    }
    // 切换选项卡事件
    onChange = (key) => {
        console.log(key);
    };
}

export default Login;
